<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百器纲目</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
            font-size: 14px;
        }
        body {
            width: 100%;
        }
        .container {
            width: 600px;
            margin: 0 auto;
        }
        img {
            width: 600px;
            height: 400px;
        }
        .title {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            text-align: center;
            font-size: 24px;
            line-height: 120px;
            cursor: default;
            height: 120px;
            background-color: lightskyblue;
            font-weight: bold;
        }
        .box {
            margin: 10px 0;
        }
        .info {
            width: 300px;
            padding: 2px;
            border: 1px solid #aaa;
        }
        .info-box{
            display: flex;
            flex-direction: row;
        }
        #submit, #h-btn, #ok-btn{
            width: 100px;
            padding: 2px 0;
            border-radius: 5px;;
            border-width: 1px;
        }
        #form2{
            display: flex;
            flex-direction: row;
            align-items: right;
            width: 100%;
            height: 30px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="title">百器纲目</div>
        <div style="margin-top: 150px; font-size: 15px; font-weight: bold;">历史记录</div>
        <div class="selected">
            <ul>
                <div id="divv1" style="height:30px;float:left;">
                    <form name="form1" action="/history/get/" method="POST">
                        <input {{checked[0]}} type="radio" name="order" id="r1" value="0" /> <label for="r1">最近10条</label>
                        <input {{checked[1]}} type="radio" name="order" id="r2" value="1" /> <label for="r2">最近1天</label>
                        <input {{checked[2]}} type="radio" name="order" id="r3" value="2" /> <label for="r3">全部</label>
                        <input type="submit" value="ok" id='ok-btn'>
                    </form>
                </div>
                <div id="divv2" style="height:30px;float:right;">
                    <form name="form2" action="/" method="GET" id="form2">
                        <input type="submit" value="返回检测" id='h-btn'>
                    </form>
                </div>
            </ul>
            <div id="id4" style="clear:both"></div>
        </div>
        {% if get %}
            <div class="box">
                {% for record in records%}
            
                <div id="record">
                    <div class="info-box">
                        <p class="info">Scalpel: {{record.Scalpel}}</p>
                        <p class="info">Straight Dissection Clamp: {{record.Straight_Dissection_Clamp}}</p>
                    </div>
                    <div class="info-box">
                        <p class="info">Straight Mayo Scissor: {{record.Straight_Mayo_Scissor}}</p>
                        <p class="info">Curved Mayo Scissor: {{record.Curved_Mayo_Scissor}}</p>
                    </div>
                    <div class="image">
                        <img src={{srcs[record.p_name]}}>
                    </div>
                    
                </div>
                
                <br/>
                {% endfor %}
            </div>
            
        
        <ul>
            {% if page_no!=1 %}
                <a href="/history/page/{{page_no-1}}/">上一页</a>&nbsp;
            {% endif %}
            {% for i in page %}
                <a href="/history/page/{{i}}/">{{i}}</a>&nbsp;
            {% endfor %}
            {% if page_no!=page[-1] %}
                <a href="/history/page/{{page_no+1}}/">下一页</a>&nbsp;
            {% endif %}
        </ul>
        
        {% else %}
            <div id="error">
                <p><big>很抱歉，没有找到{{selected}}的记录</big></p>
            </div>
        {% endif %}
    </div>
    
</body>
</html>